<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="http://cdn.staticfile.org/semantic-ui/2.2.7/semantic.min.js"></script>
    <!--    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">-->
    <link href="http://cdn.staticfile.org/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">

</head>
<body>
<div class="ui secondary  menu">
    <a class="item" href="/home"><i class="home icon"></i>
        主页
    </a>
    <a class="active item" href="/progress"><i class="space shuttle icon"></i>
        进程管理
    </a>
    <a class="item" href="/task"><i class="tasks plane icon"></i>
        作业调度
    </a>
    <a class="item" href="{% url 'test_list' %}"><i class="database icon"></i>
        存储管理
    </a>
    <a class="item" href="/disk"><i class="box icon"></i>
        磁盘调度
    </a>
</div>

<hr class="half-rule">
<div class="ui container">
    <div class="ui segment">
        <div class="ui segment">
            <div class="ui purple progress" data-value="100" data-total="100" id="progress1">
                <div class="bar">
                    <div class="progress"></div>
                </div>
                <div class="label">A资源情况</div>
            </div>
            <div class="ui teal progress" data-value="100" data-total="100" id="progress2">
                <div class="bar">
                    <div class="progress"></div>
                </div>
                <div class="label">B资源情况</div>
            </div>
            <div class="ui pink progress" data-value="100" data-total="100" id="progress3">
                <div class="bar">
                    <div class="progress"></div>
                </div>
                <div class="label">C资源情况</div>
            </div>
        </div>

        <div class="ui divider"></div>
        <div class="ui segment">
            <div class="ui fluid grid">
                <div class="four wide column">
                    <div class="ui left icon fluid input ">
                        <input type="text" id="num1" placeholder="A资源的总数...">
                        <i class="braille icon"></i>
                    </div>
                </div>

                <div class="four wide column">
                    <div class="ui left icon fluid input">
                        <input type="text" id="num2" placeholder="B资源的总数...">
                        <i class="braille icon"></i>
                    </div>
                </div>
                <div class="four wide column">
                    <div class="ui left icon fluid input">
                        <input type="text" id="num3" placeholder="C资源的总数...">
                        <i class="braille icon"></i>
                    </div>
                </div>
                <div class="one wide column">
                </div>
                <div class="three wide column">
                    <button class="ui fluid teal icon button increase" onclick="DataDo()">开&nbsp始&nbsp&nbsp<i
                            class="rocket icon"></i></button>
                </div>
            </div>
            <div class="ui fluid grid">
                <div class="four wide column">
                    <div class="ui left icon fluid input ">
                        <input type="text" id="allnum" placeholder="进程总数...">
                        <i class="boxes icon"></i>
                    </div>
                </div>

                <div class="four wide column">
                    <div class="ui left icon fluid input">
                        <input type="text" id="initnum" placeholder="初始化进程数...">
                        <i class="archive icon"></i>
                    </div>
                </div>
                <div class="four wide column">
                    <div class="ui left icon fluid input">
                        <input type="text" id="timeslice" placeholder="时间片长度...">
                        <i class="hourglass outline icon"></i>
                    </div>
                </div>
                <div class="one wide column">
                </div>
                <div class="three wide column">
                    <button class="ui fluid red icon button increase" onclick="DataClear()">清&nbsp除&nbsp&nbsp<i
                            class="trash alternate icon"></i></button>
                </div>
            </div>
        </div>
        <div class="ui divider"></div>
        <div class="ui segment">
            <div class="ui form">
                <div class="field">
                    <label>初始化信息：</label>
                    <textarea id="text" rows="4"></textarea>
                </div>
            </div>
        </div>
                <div class="ui segment">
            <div class="ui form">
                <div class="field">
                    <label>运行信息：</label>
                    <textarea id="text2" rows="10"></textarea>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    function DataDo() {
        $.ajax({
            type: "POST",
            url: "http://127.0.0.1:8000/proinit/",
            data: {
                a_num: $("#num1").val(),
                b_num: $("#num2").val(),
                c_num: $("#num3").val(),
                allnum: $("#allnum").val(),
                initnum: $("#initnum").val(),
            },
            success: function (data) {
                var msg = eval("(" + data + ")");
                document.getElementById("text").innerHTML = msg["ans"];
                var time = 0;
                var stop = false;
                var interval = setInterval(function () {
                    if (stop) {
                        clearInterval(interval);
                    }
                    $.ajax({
                        type: "POST",
                        url: "http://127.0.0.1:8000/progressgo/",
                        data: {
                            a_num: $("#num1").val(),
                            b_num: $("#num2").val(),
                            c_num: $("#num3").val(),
                            allnum: $("#allnum").val(),
                            initnum: $("#initnum").val(),
                            time: time
                        },
                        success: function (data) {
                            var msg = eval("(" + data + ")");
                            document.getElementById("text2").innerHTML = msg["ans"];
                            stop = msg["stop"];
                            $('#progress1').progress({
                                percent: msg["a"] ,
                                text: {
                                    active: 'A资源情况'
                                }
                            });
                            $('#progress2').progress({
                                percent: msg["b"] ,
                                text: {
                                    active: 'B资源情况'
                                }
                            });
                            $('#progress3').progress({
                                percent: msg["c"] ,
                                text: {
                                    active: 'C资源情况'
                                }
                            });
                        },
                        error: function (message) {
                            console.log(message);
                        }
                    });
                    time += 1;
                }, 3000)
            },
            error: function (message) {
                console.log(message);
            }
        });
    }
    function DataClear() {
       document.getElementById("text").innerHTML = "";
       document.getElementById("text2").innerHTML = "";
    }


</script>

</body>

</html>
